<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div class="topBox"></div>
		<div class="avaerTopBox f">
			<div class="leftAva f f-a-c f-d-c">
				<div class="p-r">
					<img :src="obj.avatar" class="avart" alt="" />
					<img src="/src/assets/user/5.png" class="iconImg p-a" alt="" />
				</div>
				<!-- <button class="btn">Chat</button> -->
			</div>
			<div class="avaRig">
				<div class="topTitle f f-a-c f-j-b">
					<div class="topLeft f f-a-c">
						{{ obj.lastName }} {{ obj.firstName }}
						<!-- <div class="review">4.8 / 5(Review: 325)</div> -->
					</div>
					<!-- <div @click="addInfo" class="rigIcon hand boxShow f f-a-c f-j-c"><img src="/src/assets/user/13.png" class="imgIcon" alt="" />Added</div> -->
				</div>
				<!-- Response Time: Within 8h -->
				<div class="Response f f-a-c">
					<div class="responseItem">{{ getTime(obj.lastLogin) }}</div>
				</div>
				<div class="investor">{{ obj.sectorName }}, {{ obj.industryName }} @{{ obj.countryName || "--" }} {{ obj.stateName || "--" }} {{ obj.cityName || "--" }}</div>
				<!-- Topics:  -->
				<div class="topics f f-a-c">
					<div class="topicsLef">Topics:</div>
					<div v-for="(item, index) in obj.topicNames" :key="index" class="topicsRight hand">{{ item }}</div>
				</div>
				<!-- Language:  -->
				<div class="language f f-a-c">
					Language:
					<div v-if="obj.language" class="languageCount">{{ obj.language.join(",") }}</div>
				</div>
				<!-- iicon -->
				<div class="icon f f-a-c">
					<div @click="shareBtn" class="iconLef hand f f-a-c">
						<img src="/src/assets/user/10.png" alt="" />
						Share
					</div>
					<div v-if="myUserId != userId" @click="report" class="iconLef hand f f-a-c">
						<img src="/src/assets/user/8.png" alt="" />
						Report
					</div>
				</div>
			</div>
		</div>
		<!-- About expert -->
		<div class="expert">
			<div class="topTit">About me</div>
			<div class="count">
				{{ obj.myDescribe }}
			</div>
		</div>
		<!-- Professional experience -->
		<div class="expert">
			<div class="topTit">Work experience</div>
			<div v-for="(item, index) in obj.workExperience" :key="index" class="bodyCon f f-a-c f-j-b">
				<div class="lef">{{ item?.time }} {{ item?.position }} @{{ item?.company }}</div>
				<div class="rig">{{ item?.location }}</div>
			</div>
			<!-- <div class="bodyCon f f-a-c f-j-b m-t-20">
				<div class="lef">2020 - present Founder and CTO @Billz</div>
				<div class="rig">Seattle, Washington, USA</div>
			</div> -->
		</div>
		<!-- Education  experience  -->
		<div v-if="obj.educationExperience" class="expert">
			<div class="topTit">Education experience</div>
			<div v-for="(ite, index) in obj.educationExperience" :key="index" class="bodyCon f f-a-c f-j-b">
				<div class="lef">{{ ite?.school }}{{ ite?.degree }}</div>
				<div class="rig">{{ ite?.degree }}</div>
			</div>
			<!-- <div class="bodyCon f f-a-c f-j-b m-t-20">
				<div class="lef">2020 - present Founder and CTO @Billz</div>
				<div class="rig">Seattle, Washington, USA</div>
			</div> -->
		</div>
		<upLoad @reportObj="reportObj" ref="upLoads" />
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { ref, onMounted } from "vue";
	import { getTime, copy } from "@/utils/setting.js";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import { message } from "ant-design-vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import { BuyUserinfo, CreateUser, BuyerUserDetils } from "@/api/xpert.js";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	import userModule from "./userModule.vue";
	import { useRoute } from "vue-router";
	import upLoad from "./upLoad.vue";
	let statusTab = ref(1);
	let stupShows = ref(false);
	let reviewShow = ref(false);
	let addRef = ref("");
	// 获取自己的userId
	let myUserId = JSON.parse(localStorage.getItem("userInfo")).userId;
	// 获取路径传过来的userId
	let route = useRoute();
	let userId = route.query.userId;
	let obj = ref({});
	let upLoads = ref("");
	let sectList = ref([
		{
			show: false
		},
		{
			show: false
		},
		{
			show: false
		}
	]);
	onMounted(async () => {
		await initObj();
		window.addEventListener("scroll", handleScroll);
	});
	const initObj = async () => {
		let n = await BuyerUserDetils({ userId: userId });
		obj.value = n.data;
	};
	const reportObj = async obj => {
		let n = await CreateUser({ foreignId: userId, reportContent: obj.content, reportImages: obj.imgList, reportUserIdentity: 1 });
		if (n.code == 200) {
			message.success(n.msg);
		}
		upLoads.value.upLoadVisible = false;
	};
	// const myProic = async () => {
	// 	let n = await BuyUserinfo();
	// 	obj.value = n.data;
	// };
	// 点击添加
	const addInfo = () => {
		addRef.value.dialogTableVisible = true;
	};
	// 去预约订单
	const goCustomize = () => {
		router.push("/CustomizeOrder");
	};
	// 点击复制
	const shareBtn = () => {
		const text = window.location.href;
		copy(text);
	};
	// 点击report
	const report = () => {
		upLoads.value.upLoadVisible = true;
	};
	// 切换分页
	const sizeChange = e => {
		console.log(e, "1111111");
	};
	// 切换分页
	const currentChange = e => {
		console.log(e, "1111111");
	};
	// 选择
	const reviewCheck = (item, num) => {
		sectList.value.forEach(element => {
			element.show = false;
		});
		sectList.value[num].show = !sectList.value[num].show;
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
</style>
